<template>
	<div>
		<headNav title="亲情留言"></headNav>
		<classNav :title="studentInfo" :showIcon='true'></classNav>
		<div class="container">
			<div class="oneStudent" v-for="(item,index) in chatList" :key="index">
				<div class="imgBox">
					<img v-if="item.chatUserImageUrl" :src="item.chatUserImageUrl" @error="defaultBackImg" alt="">
					<img v-else src="@/assets/img/default_head.png" alt="">
					<span v-if="!item.hasRedPoint" class="cycle"></span>
				</div>

				<div class="t-right">
					<div @click="toChat(item)">
						<p>
							<span>
								{{item.chatUserNickName}}
							</span>
							<span class="time">
								{{item.lastChatTime | chatTime}}
							</span>
						</p>
						<p v-if="item.msgType == 0" class="c_content">
							{{item.content}}
						</p>
						<p v-else class="c_content" :class="{'red': !item.hasRedPoint}">
							[语音]
						</p>
					</div>
				</div>
			</div>
		</div>
		<div v-if="chatList.length == 0" class="noContent">
			<img src="@/assets/img/weChat/noContent.png" alt="">
			<p>暂无微聊信息</p>
		</div>
	</div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import infiniteScroll from '@/components/infiniteScroll'
import classNav from './classNav'
import { LoadMore } from 'vux'
export default {
	components: {
		headNav, classNav
	},
	data() {
		return {
			chatList: [],
			time: -1,
			interval: null
		}
	},
	computed: {
		studentInfo() {
			return this.$store.state.weChat.studentInfo
		}
	},
	mounted() {
		this.getSchoolChat()
		this.getStudentInfo()
		this.timer()
	},
	destroyed() {
		clearTimeout(this.interval)
	},
	methods: {
		timer() {
			this.time++
			if (this.time >= 59) {
				this.getSchoolChat()
				this.time = -1
			}
			this.interval = setTimeout(() => {
				this.timer()
			}, 1000)
		},
		defaultBackImg() {
			if (event.type == "error") {
				event.target.src = require("../../assets/img/default_head.png")
			}
		},
		toChat(item) {
			var obj = { id: item.chatUserKeyId, name: item.chatUserNickName }
			this.$store.commit('weChat/setChatObj', obj)
			this.$router.push('chatList')
		},
		// 获取当前聊天列表
		getSchoolChat() {
			var params = {
				classId: this.$store.state.user.classId
			}
			this.$store.dispatch('weChat/GetSchoolChat', params).then(
				res => {
					this.chatList = res.chatListInfo
				}
			)
		},
		getStudentInfo() {
			this.$store.state.weChat.studentInfo = this.$store.state.user.gradeName + this.$store.state.user.className
		}
	}
}
</script>
<style lang='less' scoped>
.container {
	// margin-top: 0.88rem;
}
.oneStudent {
	position: relative;
	padding: 0.24rem 0 0 0.24rem;
	background: #fff;
	.imgBox {
		position: relative;
		width: 0.72rem;
		height: 0.72rem;
		display: inline-block;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			object-fit: cover;
		}
		.cycle {
			position: absolute;
			top: 0;
			right: 0;
			display: inline-block;
			width: 0.16rem;
			height: 0.16rem;
			background: #ff0000;
			border-radius: 50%;
		}
	}
	.t-right {
		width: 80%;
		display: inline-block;
		padding: 0 0.24rem 0.24rem 0.24rem;
		border-bottom: 0.01rem solid #e6e6e6;
		p {
			color: #010101;
			font-size: 0.28rem;
			.time {
				float: right;
				color: #999999;
				font-size: 0.26rem;
			}
		}
		.c_content {
			margin-top: 0.1rem;
			color: #999999;
			font-size: 0.26rem;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.red {
			color: #ff0000;
		}
	}
}
.oneStudent:last-child {
	> .t-right {
		border-width: 0;
	}
}
// .oneStudent:after{
//     position: absolute;
//     content: '';
//     left: 14%;
//     bottom: 0;
//     height: 0.01rem;
//     width: 86%;
//     background: #E6E6E6;
// }
.noContent {
	text-align: center;
	color: #999999;
	font-size: 0.26rem;
	padding-top: 2rem;
	img {
		width: 2.98rem;
	}
}
</style>